<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>resume</title>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="../css/example/resume2.css" />
    <script src="main.js"></script>
     <style>
        @media screen and (min-width: 1024px) {
            .hope .titles{
                font-size:14px
            }
            .interest span{
                margin:0.9rem
            }
            .resumeright{
                padding-bottom:3rem
            }
    </style>
</head>
<body>
     <div id="app" class="container">
         <div class="row">
             <div class="col-md-1"></div>
             <div class="col-md-10">
                 <div class="row">
                     <div class="col-md-5 resumeleft">
                        <left></left>
                     </div>
                     <div class="col-md-7 resumeright">
                        <div class="right">
                            <div class="right-top">
                                <div class="top-left">
                                    <header>严维斌</header><br>
                                    <span>求职目标：前端开发工程师实习生</span><br>
                                    <ul>
                                        <li>本人性格偏内向，但会主动向别人交流，勤奋朴实</li>
                                        <li>本人性格偏内向，但会主动向别人交流，勤奋朴实</li>
                                        <li>本人性格偏内向，但会主动向别人交流，勤奋朴实</li>
                                    </ul>
                                </div>
                                <div class="top-right"></div>
                            </div>
                            <div class="resume">
                                 <b>Educational BackGround 教育背景：</b><span class="spancolor"></span><br>
                                <ul>
                                    <li>2015-09 -- 2019-06&nbsp; <span>齐齐哈尔大学 <span>（本科）</span></span></li>
                                    <!--<li>2018-06 -- 2019-06&nbsp; <span>Lbxin科技公司<span>（前端实习）</span></span></li>-->
                                </ul>
                            </div>
                            <div class="resume">
                                 <b>Award Honors 奖项荣誉：</b><span class="spancolor"></span><br>
                                <ul>
                                    <li>2015-07 -- 2015-12&nbsp; <span>获得就业指导处优秀学生干部奖项</span></li>
                                    <li>2015-06 -- 2015-12&nbsp; <span>获得院级三等奖学金</span></li>
                                    <li>2015-06 -- 2015-12&nbsp; <span>获得院级三等奖学金</span></li>
                                    <li>2016-09 -- 2017-04&nbsp; <span>第二课堂--IT极客社</span></li>
                                </ul>
                            </div>
                            <div class="resume">
                                 <b>Award Honors 专业技能：</b><span class="spancolor"></span><br>
                                <ul>
                                    <li>核心技能：html+css+javascript</li>
                                    <li>核心拓展技能：sacc+less+stylus+bootstrap &nbsp;-->><b>css</b> <br>&nbsp;&nbsp;<span class="resume-js">Jquery -->> <b>javascript</b></span></li>
                                    <li>软件技能：Photoshop+flash+sublime+Chrome</li>
                                    <li>基础技能：HTML5+CSS3</li>
                                    <li>前端框架技能：vue+react</li>
                                    <li>后端技能：node.js</li>
                                    <li>数据库技能：非关系型--MongoDB   关系型--MySQL</li>
                                    <li>通信技能：ajax+vuex</li>
                                </ul>
                            </div>
                            <div class="resume">
                                 <b>Project Practice 项目实践：</b><span class="spancolor"></span><br>
                                <ul>
                                    <li>GitHub地址：<a href="https://x0516.github.io/-project/about.html">地址一</a>&nbsp;&nbsp;&nbsp;
                                        <a href="https://x0516.github.io/Test/个人主页/U灵主页.html">地址二</a></li>
                                    <li>RunJS地址：<a href="http://runjs.cn/code/xivq12lc">runjs</a></li> 
                                </ul>
                            </div>
                               
                            
                
                        </div>
                     </div>
                 </div>
             </div>
             <div class="col-md-1"></div>
         </div>
     </div>
     <template id="data-left">
         <div>
             <div class="basicdata">
                <header class="header">基本资料</header>
                <span class="list" v-for="listitemdata in leftitemdata"><img :src="listitemdata.src">{{listitemdata.values}}<br></span>
            </div>
            <div class="skills" >
                <header class="header">实战技能</header>
                <span v-for="skill in skilllist">
                    <img :src="skill.src">
                    {{skill.title}}
                </span>
            </div>
            <div class="interest" >
                <header class="header">兴趣爱好</header>
                <span v-for="interest in interests">
                        <img :src="interest.src">
                        <span class="titles">{{interest.title}}</span>
                    
                </span>
            </div>
            <div class="hope" >
                <header class="header">求职意愿</header>
                <span v-for="hope in hopes">
                    <span class="titles">{{hope.dis}}</span>
                    
                </span>
            </div>
         </div>
       
        </template>
     <script>
         var left={
             template:'#data-left',
             data(){
                 return{
                    leftitemdata:[
                        {src:"../image/CSS Sprites/name.png" ,values:"姓名：严维斌"},
                        {src:"../image/CSS Sprites/age.png"  ,values:"年龄：24"},
                        {src:"../image/CSS Sprites/phone.png",values:"电话：18793508567"},
                        {src:"../image/CSS Sprites/email.png",values:"邮箱：2408839057@qq.com"},
                    ],
                    skilllist:[
                        {title:"html+css+javascript",src:"../image/resume/html.jpg"},
                        {title:"html5+css3+stylas",src:"../image/resume/html5.jpg"},
                        {title:"vue.js+node.js",src:"../image/resume/vue.jpg"},
                        {title:"MongoDB",src:"../image/resume/MongoDB.jpg"},
                        {title:"ajax",src:"../image/resume/ajax.jpg"},
                    ],
                    interests:[
                        {src:'../image/resume/programming.jpg',title:'编程'},
                        {src:'../image/resume/listening.jpg',title:'听歌'},
                        {src:'../image/resume/movie.jpg',title:'影视'},
                        {src:'../image/resume/Photography.jpg',title:'摄影'},
                        {src:'../image/resume/food.jpg',title:'美食'},
                        {src:'../image/resume/Bodybuilding.jpg',title:'健身'},
                        {src:'../image/resume/chat.png',title:'聊天'},
                        {src:'../image/resume/phone .png',title:'手机'},
                    ],
                    resumes:[
                        {ps:'educational background 教育背景',lis:'三等奖学金'},
                        {ps:'educational background 教育背景',lis:'三等奖学金'},
                        {ps:'educational background 教育背景',lis:'三等奖学金'},
                        {ps:'educational background 教育背景',lis:'三等奖学金'},
                    ],
                    hopes:[
                        {dis:"有团队带领，工作稳定，有明确的升值体系"},
                        {dis:"有团队带领，工作稳定，有明确的升值体系"},
                        {dis:"有团队带领，工作稳定，有明确的升值体系"},
                     ]   
                 }
             }
         }

         var app=new Vue({
             el:"#app",
             
             components:{
                left
             },

         })
     </script>
</body>
</html>
